<template>
    <div>
        <NavigationBar></NavigationBar>
        <div class="article-detail">
            <el-card class="article-card">
                <div>
                    <div>
                        <el-breadcrumb separator="/">
                            <el-breadcrumb-item :to="{ path: '/train' }">刷题</el-breadcrumb-item>
                            <el-breadcrumb-item><span>{{ article.subjectName }}</span></el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                    <h2>{{ article.subjectName }}</h2>
                    <div class="title-info">
                        <p class="el-icon-user-solid">{{article.settleName}}</p>
                        <el-divider direction="vertical"></el-divider>
                        <p class="el-icon-time"> {{ $moment(article.createdTime).format('YYYY-MM-DD') }}</p>
                        <el-divider direction="vertical"></el-divider>
                        <p class="el-icon-view">{{article.subjectViews}}</p>
                        <el-divider direction="vertical"></el-divider>
                        <p class="el-icon-star-off">{{ article.likedCount }}</p>
                    </div>
                </div>
                <el-divider></el-divider>
                <div v-html="article.subjectParse"></div>
                <div class="article-footer">
                    <el-divider></el-divider>
                    <el-link v-if="article.lastSubjectName" icon="el-icon-arrow-left" @click="showUpArticle(article.lastSubjectId)">
                        上一题：
                        <span>{{ article.lastSubjectName }}</span>
                    </el-link>
                    <el-link v-else>
                        <span>没有上一题了</span>
                        <i class="el-icon-arrow-right"></i>
                    </el-link>
                    <el-link v-if="article.nextSubjectName" style="float: right;" @click="showDownArticle(article.nextSubjectId)">
                        下一题：
                        <span>{{ article.nextSubjectName }}</span>
                        <i class="el-icon-arrow-right"></i>
                    </el-link>
                    <el-link v-else style="float: right;">
                        <span>没有下一题了</span>
                        <i class="el-icon-arrow-right"></i>
                    </el-link>
                </div>
            </el-card>
        </div>
        <el-backtop :visibility-height="200" />
    </div>
</template>

<script>
import NavigationBar from '@/components/NavigationBar';
import TrainInfoApi from '@/api/trainInfo';

export default {
    components: {
        NavigationBar
    },
    name: 'ArticleDetail',
    data() {
        return {
            subjectInfoDTO: {},
            article: {},
            categoryIds: [],
            labelIds: [],
            panelId: [],
        };
    },
    methods: {
        async querySubjectInfo(subjectInfoDTO) {
            try {
                const res = await TrainInfoApi.querySubjectInfo(subjectInfoDTO);
                this.article = res;
            } catch (error) {
                console.error('获取数据失败:', error); // 异常处理
            }
        },
        //上一题
        showUpArticle(lastSubjectId) {
            const detail = this.panelId[0] + '-' + lastSubjectId;
            this.$router.push({ path: `/train/detail/${detail}` });
            this.SubjectInfoDTO = { id: this.article.lastSubjectId, categoryIds: this.categoryIds, labelIds: this.labelIds };
            this.querySubjectInfo(this.SubjectInfoDTO);
        },
        //下一题
        showDownArticle(nextSubjectId) {
            const detail = this.panelId[0] + '-' + nextSubjectId;
            this.$router.push({ path: `/train/detail/${detail}` });
            this.SubjectInfoDTO = { id: this.article.nextSubjectId, categoryIds: this.categoryIds, labelIds: this.labelIds };
            this.querySubjectInfo(this.SubjectInfoDTO);
        },
    },

    mounted() {
        console.log('题目id:', this.$route.params.id);
        this.panelId = this.$route.params.id.split('-');
        console.log('panelId:', this.panelId);
        this.categoryIds = JSON.parse(localStorage.getItem(this.panelId[0] + 'categoryIds'));
        this.labelIds = JSON.parse(localStorage.getItem(this.panelId[0] + 'labelIds'));
        console.log('分类id:', this.categoryIds);
        console.log('标签id:', this.labelIds);
        // 题目id: 1-1001, 1是分类id，1001是题目id，通过分类id去本地缓存拿分类标签集合，题目id去后台拿题目详情
        this.SubjectInfoDTO = { id: this.panelId[1], categoryIds: this.categoryIds, labelIds: this.labelIds };
        this.querySubjectInfo(this.SubjectInfoDTO);
    }


};
</script>

<style scoped>
.article-detail {
    margin-left: 200px;
    margin-right: 200px;
    margin-top: 20px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1)
}

.title-info {
    display: flex;
    /* justify-content: center; */
    align-items: center;
    font-size: 12px;
    /* background-color: #99a9bf; */
}
</style>